<template>
    <div id="v-center">
        <el-row class="e-row" type="flex" justify="space-between">
            <!-- 视频监控 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20" style="height:24.4%">
                <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div>
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>视频监控</span>
                </div>
                <v-center-top />
            </el-col>

            <!-- 风险等级图 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20" style="height:40.4%;">
                <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div>
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>风险等级图</span>
                </div>
                <!-- <v-center-center /> -->
                <div class="risk-bg">
                    <img src="../image/risk_d_bg.png" />
                </div>
            </el-col>

            <!-- 热项追踪 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20" style="height:32.4%">
                <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div>
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>热项追踪</span>
                </div>
                <v-center-btn />
            </el-col>

        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import VCenterTop from './e-component/v-center/v-center-t.vue'
import VCenterBtn from './e-component/v-center/v-center-b.vue';
export default defineComponent( {
    name:'v-center',
    components: {
        VCenterBtn,
        VCenterTop,
    },
    setup(props){
        return {}
    }
})
</script>
<style lang="scss"> @import '../style/echarts.scss'; </style>
<style lang="scss" scoped>
#v-center{
    height: 100%;
    .e-row{
        display: flex;
        height: 100%;
        .c-mb20{
            // height: 32.4%;
            position: relative;
            background-color: transparent; /* 透明背景 */
            overflow: hidden; /* 隐藏超出部分 */
            .t-c,.cont-c{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 40px;
            }
            .t-c{ z-index: 1 }
            .cont-c{
                z-index: 2;
                display: flex;
                align-items: center;
                .i-c{
                    margin: 0 8px;
                    width: 15px;
                    height: 15px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    display: block;
                }
            }
            .pro-t,.pro-l,.pro-r,.pro-b{
                position: absolute;
                z-index: 0;
            }
            .pro-t,.pro-b{
                width: 100%;
                height: 1px;
                left: 0;
            }
            .pro-l,.pro-r{
                height: 100%;
                width: 1px;
                top: 0;
            }
            .pro-t{ top: 0; }
            .pro-b{ bottom: 0; }
            .pro-l{ left: 0; }
            .pro-r{ right: 0; }
            .risk-bg{
                width: 100%;
                height: 100%;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>